/**
* 功能描述：日期时间选择器样式表
* @author jin xiaohang
* @date 2022/9/21 8:38
*/

@import "src/style/mixins/index";

//布局相关
@include b(base-date-time-picker-layout){

  //日期时间待选面板布局
  .#{$namespace}-base-date-time-picker-panel-layout{
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 300px;
    margin-top: 5px;

    //选择框布局
    .#{$namespace}-base-date-time-picker-input-select-layout{
      display: flex;
      flex-direction: row;
      margin-top: 5px;

      //左侧选择框布局
        .#{$namespace}-base-date-time-picker-input-left-layout{
          width: 50%;
        }

      //右侧选择框布局
        .#{$namespace}-base-date-time-picker-input-right-layout{
          width: 50%;
          margin-left: 15px;
        }
    }

    //待选面板布局
    .#{$namespace}-base-date-time-picker-select-panel-layout{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 5px;
      width: 100%;
      height: 100%;

      //待选面板单元格布局
      .#{$namespace}-base-date-time-picker-select-panel-cell-layout{
        width: 30% ;
        height: 10%;
      }
    }
  }
}

//样式相关
@include b(base-date-time-picker-style){

  //待选面板样式
  .#{$namespace}-base-date-time-picker-panel-style{
    border-style: solid;
    border-width: $border-width-base;

    //待选面板样式
      .#{$namespace}-base-date-time-picker-select-panel-style{
          border-style: solid;
          border-width: $border-width-base;
          cursor: pointer;
          background-color: #FFFFFF;

        //待选面板单元格样式
        .#{$namespace}-base-date-time-picker-select-panel-cell-style{

          //聚焦 激活
            &:focus &:active{
              background-color: #67C23A;
            }

          //鼠标悬停
            &:hover{
              background-color: #67C23A;
            }
        }
      }
  }

}